<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">

    <!-- 引入 jquery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


</head>
<body>
    <!-- 导航栏，nav 是 导航的缩写 -->
    <div class="nav">
        <!-- logo -->
        <img src="image/lamb.png" alt="">
        <div class="title">我的博客系统</div>
        <!-- 只是一个空白，用来把后面的链接挤过去 -->
        <!-- 这是一个简单粗暴的写法 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>

        <a href="logout">注销</a>
    </div>
    
    <!-- 页面的主体部分 -->
    <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <!-- 这个 div 表示整个用户信息的区域 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="image/lanyangyang.png" alt="">
                <!-- 用户名 -->
                <h3></h3>
                <!-- github地址 -->
                <a href="https://www.github.com">github 地址</a>
                <!-- 统计信息 -->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 这个 div 表示一个 博客
            <div class="blog">
                博客标题
                <div class="title">我的第一篇博客</div>
                博客的发布时间
                <div class="date">2023-05-11 20:00:00</div>
                博客的摘要
                <div class="desc">
                    使用 Loren 生成一段随机的字符串
                    从今天起，我要认真敲代码。Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo temporibus quam praesentium fugiat eveniet! Tempore assumenda ex a, necessitatibus deleniti earum vitae totam iure magni, harum consequuntur accusantium, hic enim?
                </div>
                html 中不能直接写 < ，<可能会被当成标签的一部分
                &gt;是 < 大于号
                &lt;是 > 小于号
                <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt; </a>
            </div> -->

        </div>
    </div>

   
    <script>
        //通过 ajax 给复位群殴发请求，获取到所有的博客数据，并且构造到页面上
        function getBlogs() {
            $.ajax({
                type: 'get',
                url: 'blog',
                success: function(body) {
                    //根据返回的数据，构造出页面中对应的元素
                    let containerRight = document.querySelector('.container-right');
                    for(let blog of body) {
                        let blogDiv = document.createElement("div");
                        blogDiv.className = 'blog';
                        let titleDiv = document.createElement("div");
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        let dateDiv = document.createElement("div");
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = blog.postTime;
                        let descDiv = document.createElement("div");
                        descDiv.className = 'desc';
                        descDiv.innerHTML = blog.content;
                        let a = document.createElement("a");
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        a.innerHTML = '查看全文 &gt;&gt;';

                        //把上述标签构造好了之后，还需要组合起来
                        blogDiv.appendChild(titleDiv);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(a);
                        containerRight.appendChild(blogDiv);
                    }
                }
            });
        }
        //调用
        getBlogs();

        function getLoginStatus() {
            $.ajax({
                type: 'get',
                url: 'login',
                success: function(body) {
                    //响应 200 的时候，执行 success 回调
                    console.log("用户已经登录了.");
                    //把返回的用户名，设置到页面中
                    let h3 = document.querySelector('.card h3');
                    //body 已经是一个 js 对象了，就是前面服务器返回的 json 格式的 user 对象
                    h3.innerHTML = body.username;
                },
                error: function(body) {
                    //响应 403 的时候，执行 error 回调，（只要返回不是 2 开头的，都会触发 error）
                    //跳转到 login.html 主页
                    location.assign("login.html");
                }
            });
        }
        //判定用户的登录状态
        getLoginStatus();

    </script>
</body>
</html>